/* 
1 发送请求获取数据 
2 点击轮播图 预览大图
  1 给轮播图绑定点击事件
  2 调用小程序的api  previewImage 
3 点击 加入购物车
  1 先绑定点击事件
  2 获取缓存中的购物车数据 数组格式 
  3 先判断 当前的商品是否已经存在于 购物车
  4 已经存在 修改商品数据  执行购物车数量++ 重新把购物车数组 填充回缓存中
  5 不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素 带上 购买数量属性 num  重新把购物车数组 填充回缓存中
  6 弹出提示
4 商品收藏
  1 页面onShow的时候  加载缓存中的商品收藏的数据
  2 判断当前商品是不是被收藏 
    1 是 改变页面的图标
    2 不是 。。
  3 点击商品收藏按钮 
    1 判断该商品是否存在于缓存数组中
    2 已经存在 把该商品删除
    3 没有存在 把商品添加到收藏数组中 存入到缓存中即可
 */
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  data: {
    goodsObj: {}, //商品详情信息
    // 商品是否被收藏
    isCollect: false
  },
  // 商品对象 放大图 和购物车都可以使用到 一个商品的整体信息
  GoodsInfo: {},
  /**
   * 页面频繁打开所以用这个生命周期函数  通过页面栈来获取参数
   */
  onShow: function () {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;   //options：{goods_id：xx}
    const { goods_id } = options; //对象解构
    this.getshoplist(goods_id)
  },
  //发送请求根据id 获取数据
  async getshoplist(goods_id) {
    const goodsObj = await request({ url: '/goods/detail', data: { goods_id } })
    this.GoodsInfo = goodsObj //保存的一个商品的整体信息
    // 1 获取缓存中的商品收藏的数组
    let collect = wx.getStorageSync("collect") || [];
    // 2 判断当前商品是否被收藏 存入的数组一个商品详情信息数据 和全局的二者对比 回调函数返回true 表达式就为true
    let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
    this.setData({
      goodsObj: {
        goods_name: goodsObj.goods_name,
        goods_price: goodsObj.goods_price,
        // iphone部分手机 不识别 webp图片格式 
        // 最好找到后台 让他进行修改 
        // 临时自己改 确保后台存在 1.webp => 1.jpg 
        goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
        pics: goodsObj.pics
      },
      isCollect
    })
  },

  //点击轮播图 放大预览 展示的字符串数组 和 显示当前点击的优先显示
  handlePrevewImage(e) {
    // 1 先构造要预览的图片数组 字符串数组 通过map函数来重构
    const urls = this.GoodsInfo.pics.map(v => v.pics_mid) //取出mid图片路径当值
    // 2 接收传递过来的图片url
    const current = e.currentTarget.dataset.url;
    // 调用wx api 内置方法
    wx.previewImage({
      current,
      urls
    });
  },

  //点击 加入购物车的逻辑 添加到本地存 之后 通过判断数组值 是否存在 存在就直接++ 不存在就添加一个新属性num 来记录 之后 重新设置本地存储 在提示用户 
  handleCartAdd() {
    //获取本地存储的数据 有值的话就获取 没有的话就是空字符串 之后 默认空数组
    let cart = wx.getStorageSync('cart') || []
    //根据index来判断 是否存在数组元素了 通过indexfind 查询 找到就返回 当前索引 没有就-1 
    //根据商品信息来查询 和获取到的数据 加{ } 报错 
    let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id)//cart 也是一个整个商品信息的)
    if (index === -1) {
      //不存在就等于-1 就是没有找到 添加新数组 push 到cat数组里面
      this.GoodsInfo.num = 1;  //设置一个num属性
      this.GoodsInfo.checked = true; //设置一个控制勾选框的属性
      cart.push(this.GoodsInfo) //往数组添加一个元素项 也就是整一个商品信息
    } else {
      // 4 已经存在购物车数据 执行 num++ 当前的索引第几个查到就添加对应的index
      cart[index].num++;
    }
    //添加完成后 就重新设置数组
    wx.setStorageSync('cart', cart)
    //提醒用户 弹窗提示
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      // true 防止用户 手抖 疯狂点击按钮 mask 1.5s才能操作
      mask: true
    })
  },
  // 点击 商品收藏图标
  handleCollect() {
    // 没点击之前 开始是false的
    let isCollect = false
    // 1 获取缓存中的商品收藏数组
    let collect = wx.getStorageSync('collect') || []
    // 2 判断该商品是否被收藏过 判断商品是否存在 就取决于数组是否有值 那就是查询数组元素是否存在
    let index = collect.findIndex(v => v.goods_id === this.GoodsInfo.goods_id)
    // 3 当index！=-1表示 已经收藏过 找到就返回对应的索引 没有就返回-1
    if (index != -1) {
      // 能找到 已经收藏过了  在数组中删除该商品
      collect.splice(index, 1)
      // 删除后就返回原本的样式 空白 此时的data并没有修改哦
      isCollect = false;
      //弹窗提示 
      wx.showToast({
        title: '取消成功',
        icon: 'success',
        mask: true
      });
    } else {
      //没找到 添加商品 当前的商品一个
      collect.push(this.GoodsInfo)
      // 添加后就返回填充的样式
      isCollect = true
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        mask: true
      });
    }
    // 4 把数组存入到缓存中
    wx.setStorageSync('collect', collect)
    // 5 修改data中的属性  isCollect
    this.setData({
      isCollect
    })
  }
}) 